<template>
  <div id="field" class="field">
    <select v-model="classA">
      <option value="">一级领域</option>
      <option :value="item.classA" v-for="item in fieldData">{{item.classA}}</option>
    </select>
    <select v-model="classB">
      <option value="">二级领域</option>
      <option :value="item.name" v-for="item in states">{{item.name}}</option>
    </select>
  </div>
</template>
<script type="text/javascript">
import fieldData from './fieldData'
export default {
  data() {
      return {
        fieldData: fieldData,
        classA: '',
        classB: ''
      }
    },
    computed: {
      states() {
        if (!this.classA) {
          return []
        } else {
          var arr = []
          fieldData.forEach((item, index) => {
            if (this.classA === item.classA) {
              arr = item.classB
            }
          })
          return arr
        }
      }
    }
}
</script>
<style type="text/css" scoped>
.field {
  display: inline-block;
}

select {
  width: 150px;
  margin-right: 7px;
  height: 40px;
  border: 1px solid #ddd;
}
</style>
